<template>
	<div class="constant">
		<!-- 面包屑 -->
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
				<el-breadcrumb-item>信息管理</el-breadcrumb-item>
				<el-breadcrumb-item>常数项管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="constant-a">
			<!--	搜索框	-->
			<div class="constant-search">
				<el-form ref="form" :inline="true" :model="searchForm" label-width="100px" size="medium">
					<el-form-item label="常数项分类">
						<el-select v-model="searchForm.constant_term_kind" placeholder="请选择常数项分类">
							<el-option v-for="i in constantKinds" :label="i.constant_term_kind_name" :value="i.constant_term_kind_id" :key="i.constant_term_kind_id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="常数项名">
						<el-input v-model="searchForm.constant_term_name"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchSubmit"><i class="el-icon-search"></i> 搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!-- 一堆按钮 新增 删除 -->
			<div class="constant-buttons">
				<div>
					<el-button type="primary" size="medium" @click="addConstant"><i class="el-icon-plus"></i> 增加</el-button>
				</div>
				<div>
					<el-button type="danger" size="medium" :disabled="delButton" @click="delSelect"><i class="el-icon-delete"></i> 删除</el-button>
				</div>
			</div>
			<!-- 菜品表格 -->
			<div class="constant-table">
				<el-table
					:data="tableData"
					style="width: 100%"
					@selection-change="searchChange">
					<el-table-column
						type="selection"
						width="55px"
						align="center">
					</el-table-column>
					<el-table-column
						prop="constant_term_id"
						label="常数项id"
						sortable>
					</el-table-column>
					<el-table-column
						prop="constant_term_kind"
						label="常数项类别">
					</el-table-column>
					<el-table-column
						prop="constant_term_name"
						label="常数项名称"
						sortable>
					</el-table-column>
					<el-table-column
						prop="constant_term_meaning"
						label="常数项意义"
						sortable>
					</el-table-column>
					<el-table-column
						fixed="right"
						label="操作"
						width="130px"
						align="center">
						<template slot-scope="scope">
							<el-button @click="editClick(scope.row)" type="text" ><i class="el-icon-edit"></i> 编辑</el-button>
							<el-button @click="delClick(scope.row)" type="text" ><i class="el-icon-delete"></i> 删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页相关 -->
			<div class="constant-page">
				<el-pagination
					background
					layout="total, sizes, prev, pager, next, jumper"
					:page-sizes="[5,10,15,20]"
					:current-page="pageNum"
					:total="total"
					:page-size="pageSize"
					@size-change="handleSizeChange"
					@current-change="currentChange">
				</el-pagination>
			</div>
			<!-- 增加弹出窗 -->
			<div class="constant-dialog" >
				<el-dialog
					title="增加常数项"
					:visible.sync="addDialogVisible"
					width="600px"
					top="15vh">
					<div class="food-dialog-from"><!-- 中间内容 -->
						<el-form :model="addForm" label-width="100px" size="small">
							<el-form-item label="常数项分类">
								<el-select @change="addChange" v-model="addForm.constant_term_kind" placeholder="请选择常数项分类">
									<el-option v-for="i in constantKinds" :label="i.constant_term_kind_name" :value="i.constant_term_kind_id"
									           :key="i.constant_term_kind_id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="常数项意义" prop="constant_term_meaning">
								<el-input v-model="addForm.constant_term_meaning"></el-input>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addSubmit(addForm)">确 定</el-button>
			  </span>
				</el-dialog>
			</div>
			<!-- 编辑弹出窗 -->
			<div class="constant-dialog" >
				<el-dialog
					title="增加常数项"
					:visible.sync="editDialogVisible"
					width="600px"
					top="15vh"
				>
					<div class="food-dialog-from"><!-- 中间内容 -->
						<el-form :model="editForm" label-width="100px" size="small">
							<el-form-item label="常数项分类">
								<el-select @change="editChange" v-model="editForm.constant_term_kind" placeholder="请选择常数项分类">
									<el-option v-for="i in constantKinds" :label="i.constant_term_kind_name" :value="i.constant_term_kind_id"
									           :key="i.constant_term_kind_id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="常数项意义" prop="constant_term_meaning">
								<el-input v-model="editForm.constant_term_meaning"></el-input>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
					<el-button @click="editDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="editSubmit(editForm)">确 定</el-button>
			  </span>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
  import FoodService from "@/views/Food/FoodService";
	import ConstantService from "@/views/Constant/ConstantService";

  export default {
    name: "Constant",
    data(){
      return{
        searchForm:{
          constant_term_kind:null,
          constant_term_name:''
        },
        addForm:{
          constant_term_name:''
        },
        editForm:{
          constant_term_name:''
        },
        tableData:[],
        constantKinds:[],
        total:100,
        pageNum:1,
        pageSize:5,
        addDialogVisible:false,
        editDialogVisible:false,
        delButton:true,
        tableSelect:[]

      }
    },
    methods:{
      //提交搜索表单
      searchSubmit(){
        this.pageNum=1;
        this.searchConstant();
      },
      //批量删除
      delSelect(){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let list = this.tableSelect.map(item=>{
            return item.constant_term_id;
          })
          ConstantService.delConstantAllService({
            deleteList: list
          },r=>{
            if(r.deleteGroupResult){
              this.$message({
                type: 'success',
                message: `删除成功`
              });
            }else{
              this.$message({
                type: 'error',
                message: `删除失败`
              });
            }
            this.searchConstant();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //增加
      addConstant(){
        this.addDialogVisible=true;
      },
      //编辑
      editClick(row){
        this.editDialogVisible=true;
        //console.log(row);
        this.editForm=row;

      },
      //单删
      delClick(row){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ConstantService.delConstantService({
            constant_term_id:row.constant_term_id
          },r=>{
            if(r.deleteResult==1){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
            this.searchConstant();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //页面跳转
      currentChange(val){
        this.pageNum=val;
        this.searchConstant();
      },
      //页面大小改变
      handleSizeChange(val){
        this.pageSize=val;
        this.pageNum=1;
        this.searchConstant();
      },
      //提交添加表单
      addSubmit(addForm){
        this.addDialogVisible = false;
        //console.log(addForm);
        ConstantService.addConstantService({
	        constant_term_kind:addForm.constant_term_kind,
	        constant_term_name:this.addForm.constant_term_name,
	        constant_term_meaning:addForm.constant_term_meaning
        },r=>{
            if(r.addResult){
              this.$message({
                type: 'success',
                message: '提交成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: '提交失败!'
              });
            }
            this.searchConstant();
          });
      },
      editSubmit(editForm){
        this.editDialogVisible = false;
        ConstantService.editConstantService({
	        constant_term_id:editForm.constant_term_id,
          constant_term_kind:editForm.constant_term_kind,
          constant_term_name:this.addForm.constant_term_name,
          constant_term_meaning:editForm.constant_term_meaning
        },r=>{
            if(r.modifyhResult){
              this.$message({
                type: 'success',
                message: '提交成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: '提交失败!'
              });
            }
            this.searchConstant();
          })
      },
      //表格选择改变回调
      searchChange(select){
        //console.log(select);
        this.tableSelect = select;
        this.delButton = select.length == 0;

      },
	    addChange(value){
        this.constantKinds.forEach(item=>{
          if(item.constant_term_kind_id==value){
            this.addForm.constant_term_name=item.constant_term_kind_name;
          }
        })
	    },
      editChange(value){
        //console.log(value);
        this.constantKinds.forEach(item=>{
          if(item.constant_term_kind_id==value){
            this.editForm.constant_term_name=item.constant_term_kind_name;
          }
        })
      },
      //搜索方法
      searchConstant(){
        console.log(`搜索ing：名称：${this.searchForm.constant_term_name}分类：${this.searchForm.constant_term_kind}当前页：${this.pageNum}`)
        ConstantService.searchConstantService({
          constant_term_kind:this.searchForm.constant_term_kind,
          constant_term_name:this.searchForm.constant_term_name,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },r=>{
          this.tableData = r.searchByConstantTermList.list;
          this.total = r.searchByConstantTermList.total;
        })
      }
    },
    created(){
			ConstantService.categoryService({

			},r=>{
			  this.constantKinds=r.ctkList;
			})
      this.searchForm.constant_term_kind=null;
      this.searchForm.constant_term_name='';
      this.pageNum=1;
      this.pageSize=5;
			this.searchConstant();
    }
  }
</script>

<style scoped lang="less">

	@import '../../style/Common.less';
	.constant-a{
		padding: 20px;
	}
	.constant-search{
		color: #606266;
		font-weight:bold;
	}
	.constant-buttons{
		display: flex;
		> div{
			margin: 0 12px 20px 12px;
		}
	}
	.constant-table{

	}
	.constant-page{
		height: 32px;
		margin: 20px 20px 20px 0;
		float: right;
	}
	.constant-dialog{
		.constant-dialog-from{
			padding: 0 20px;
		}
	}

	.hide .el-upload--picture-card {
		display: none;
	}
</style>